:host {
  --_ng-progress-thickness: var(--ng-progress-thickness, 2);
  --_ng-progress-thickness-px: calc(var(--_ng-progress-thickness) * 1px);

  --_ng-progress-thickness-add-one: calc(var(--_ng-progress-thickness) + 1);
  --_ng-progress-meteor-position-px: calc(var(--_ng-progress-thickness-add-one) * -1px);

  --_ng-progress-color: var(--ng-progress-color, #1B95E0);
  --_ng-progress-holder-color: var(--ng-progress-holder-color, transparent);
  --_ng-progress-ease: var(--ng-progress-ease, linear);

  --_ng-progress-spinner-thickness: var(--ng-progress-spinner-thickness, 2);
  --_ng-progress-spinner-thickness-px: calc(var(--_ng-progress-spinner-thickness) * 1px);

  --_ng-progress-spinner-spacing: var(--ng-progress-spinner-spacing, 15);
  --_ng-progress-spinner-spacing-px: calc(var(--_ng-progress-spinner-spacing) * 1px);

  --_ng-progress-spinner-size: var(--ng-progress-spinner-size, 18);
  --_ng-progress-spinner-size-px: calc(var(--_ng-progress-spinner-size) * 1px);

  --_ng-progress-spinner-speed: var(--ng-progress-spinner-speed, 250ms);

  z-index: 999999;
  pointer-events: none;

  &.ng-progress-bar-active {
    .ng-progress-bar-wrapper {
      filter: alpha(opacity=100);
      opacity: 1;
      transition: none;
    }

    .ng-bar {
      transition: all var(--_ng-progress-speed) var(--_ng-progress-ease);
    }
  }

  &.ng-progress-bar-relative {
    .ng-progress-bar-wrapper {
      position: relative;
    }
  }

  &[direction='ltr+'], &[direction='ltr-'] {
    .ng-meteor {
      rotate: calc(var(--_ng-progress-thickness-add-one) * 1deg);
    }
  }

  &[direction='ltr+'], &[direction='rtl+'] {
    .ng-bar {
      margin-left: -100%;
    }

    .ng-meteor {
      right: 0;
    }
  }

  &[direction='ltr+'], &[direction='rtl-'] {
    .ng-meteor {
      top: var(--_ng-progress-meteor-position-px);
    }
  }

  &[direction='ltr-'], &[direction='rtl+'] {
    .ng-meteor {
      bottom: var(--_ng-progress-meteor-position-px);
    }

    // reverse direction
    .ng-bar-placeholder {
      transform: rotate(180deg);
    }

    .ng-spinner-icon {
      animation-direction: reverse;
    }
  }

  &[direction='rtl+'], &[direction='rtl-'] {
    .ng-meteor {
      rotate: calc(var(--_ng-progress-thickness-add-one) * -1deg);
    }
  }

  .ng-spinner {
    top: var(--_ng-progress-spinner-spacing-px);
  }

  &[spinnerPosition='left'] .ng-spinner {
    left: var(--_ng-progress-spinner-spacing-px);
  }

  &[spinnerPosition='right'] .ng-spinner {
    right: var(--_ng-progress-spinner-spacing-px);
  }
}

.ng-progress-bar-wrapper {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 100%;
  transform: scale(1);
  filter: alpha(opacity=0);
  opacity: 0;
  transition: opacity var(--_ng-progress-fade-out-speed) linear;
}

.ng-bar-placeholder {
  position: absolute;
  height: var(--_ng-progress-thickness-px);
  width: 100%;
}

.ng-bar {
  width: 100%;
  height: 100%;
  transform: translate(-100%, 0, 0);
  background: var(--_ng-progress-color);
}

.ng-meteor {
  display: block;
  position: absolute;
  width: 100px;
  height: 100%;
  opacity: 1;
  box-shadow: 0 0 10px var(--_ng-progress-color), 0 0 5px var(--_ng-progress-color);
}

.ng-spinner {
  position: absolute;
  display: block;
  z-index: 1031;
  top: 10px;
}

.ng-spinner-icon {
  box-sizing: border-box;
  animation: spinner-animation var(--_ng-progress-spinner-speed) linear infinite;
  border-style: solid;
  border-color: transparent;
  border-radius: 50%;
  border-top-color: var(--_ng-progress-color);
  border-left-color: var(--_ng-progress-color);
  width: var(--_ng-progress-spinner-size-px);
  height: var(--_ng-progress-spinner-size-px);
  border-width: var(--_ng-progress-spinner-thickness-px);
}

@keyframes spinner-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
